<template>
  <section class="tools-section">
    <div class="flex items-center justify-between">
      <h2 class="text-34 text-gray-34 font-semibold"
        v-if="!path">
        {{isNoI18n ? titleLabel : $t(`${titleLabel.replace('_character','')}`)}}{{hasRealVal(year) ? ` ${year}` : ''}}
      </h2>
      <div v-else>
        <common-link :path="path"
          :params="params"
          class="text-34 text-gray-34 font-semibold hover:text-purple-1300">
          {{isNoI18n ? titleLabel : $t(`${titleLabel.replace('_character','')}`)}}{{hasRealVal(year) ? ` ${year}` : ''}}
        </common-link>
      </div>
      <slot name="sort"></slot>
    </div>

    <div class="tools grid gap-5 sm:grid-cols-2 mt-7"
      :class="{
        'md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5': !isIndex,
        'md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4': isIndex,
      }"
      v-if="toolsList && toolsList.length > 0 && !loading">
      <min-tool v-for="(item, key) in toolsList"
        :isSearch="isSearch"
        :key="item.handle+'-'+key"
        :toolPosIndex="key"
        :toolPosition="isNoI18n ? titleLabel : $t(`${titleLabel.replace('_character','')}`, 'en')"
        :toolsData="item"
        :lazyLoad="isFirstScreen && key < 4 ? false : lazyLoad"></min-tool>
    </div>
    <div class="w-2/4 mx-auto py-20 text-center"
      v-if="loading">
      <el-button type="text"
        class="cursor-default">
        <img :src="loadingSrc"
          class="loading"
          alt=""
          srcset="">
      </el-button>
    </div>
    <slot name="ctrl"></slot>
  </section>
</template>

<script>
export default {
  name: 'ToolsSection',
  props: {
    //是否有边框
    toolsList: {
      type: Array,
      default: [],
    },
    titleLabel: {
      type: Number | null,
      default: 0,
    },
    isNoI18n: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    path: {
      type: String,
      default: '',
    },
    params: {
      type: Object,
      default: () => ({}),
    },
    isIndex: {
      type: Boolean,
      default: false,
    },
    isSearch: {
      type: Boolean,
      default: false,
    },
    //渲染延迟
    lazyLoad: {
      type: Boolean,
      default: false,
    },
    year: {
      type: String | Number | undefined | null,
      default: '',
    },
    //是否是加载后的首屏，首屏模块前8个去掉图片懒加载
    isFirstScreen: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loadingSrc: require('@/static/images/loading.png'),
    }
  },
}
</script>
<style lang='scss' scoped>
.tools-section {
  ::v-deep .common-square-sort {
    .dropdown {
      height: 42px;
      min-width: 130px;
    }
  }
  ::v-deep .tool-item {
    .tool-desc {
      -webkit-line-clamp: 2;
    }
  }
}
</style>